<template>
	<div class="view">
		<div class="data-view">
			<Table 
				highlight-row 
				border 
				stripe 
				:loading="data.loading" 
				:columns="columns" 
				:data="data.data">
			</Table>
		</div>
	</div>
</template>

<script>
	import {formatTimestamp} from '@/libs/date-util.js';
	
	export default {
		props: ['data'],
		data() {
			return {
				roles: ["超级管理员", "管理员", "审核员", "录入员"],
				columns: [{
						type: 'index',
						width: 60,
						align: 'center'
					},
					{
						title: '用户名',
						width: 120,
						align: 'center',
						key: 'username'
					},
					{
						title: '姓名',
						width: 80,
						key: 'name'
					},
					{
						title: '手机号',
						width: 120,
						align: 'center',
						key: 'phoneNum'
					},
					{
						title: '角色',
						width: 120,
						align: 'center',
						key: 'role',
						render: (h, params) => {
							var roleType = params.row.roleType;
							return this.roles[roleType - 1]
                        }
					},
					{
						title: '创建时间',
						align: 'center',
						key: 'createTime',
						render: (h, params) => {
                        		return formatTimestamp(params.row.createTime * 1000);
                        }
					},
					{
						title: '上次登录时间',
						align: 'center',
						key: 'lastLoginTime',
						render: (h, params) => {
							return formatTimestamp(params.row.lastLoginTime * 1000);
                        }
					},
					{
						title: '状态',
						width: 80,
						align: 'center',
						key: 'status',
						fixed: 'right',
                        render: (h, params) => {
                        		if(params.row.status == 1)
                           		return "正常"
                           	else if(params.row.status == 0)
                           		return "禁用"
                           	else if(params.row.status == 2) {
                           		return "N/A"
                           	}
                        }
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						width: 200,
						fixed: 'right',
						render: (h, params) => {
							var data = this.data.data[params.index];
							if(params.row.status == 2) {
								return "N/A";
							}
							var btn;
							if(params.row.status == 1) {
								btn = h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
                                        click: () => {
                                             this.click2Item('disable', data)
                                        }
                                    }
                                }, '禁用');
							} else {
								btn = h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
                                        click: () => {
                                             this.click2Item('enable', data)
                                        }
                                    }
                                }, '启用');
							}
							return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
                                        click: () => {
                                            this.click2Item('edit', params);
                                        }
                                    }
								}, '编辑'), 
								h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
                                        click: () => {
                                            this.click2Item('edit-pwd', params);
                                        }
                                    }
                                }, '重置密码'), btn
                            ]);
                      	}
					}
				]
			}
		},
		methods: {
			click2Item(type, data) {
				this.$emit('on-click', type, data);
			}
		},
		mounted: function() {
		}
	}
</script>

<style scoped="scoped">
	.data-view {
	}
</style>